<template>
  <section>
    <section class="home-product-swiper flex-cc fixed-top h-screen">
      <Swiper
        :autoplay="{
          delay: 2500,
          disableOnInteraction: false,
        }"
        :loop="true"
        :pagination="{
          clickable: true,
        }"
        :navigation="true"
        :modules="modules"
        class="swiper"
      >
        <SwiperSlide>
          <div>
            <img :src="images.imgSwiper1" />
            <article>
              <h3>Miniaturized</h3>
              <p>
                It enables portable, high-resolution brain imaging in real-time, expanding access to neuroscience research and clinical diagnostics in diverse
                settings, including freely behaving subjects and resource-limited environments.
              </p>
            </article>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div>
            <img :src="images.imgSwiper2" />
            <article>
              <h3>Integrated storage compartment</h3>
              <p>
                It designed to securely organize and protect ultrasound probes, ensuring easy accessibility, portability, and streamlined workflow during
                clinical or field use.
              </p>
            </article>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div>
            <img :src="images.imgSwiper3" />
            <article>
              <h3>Cooling</h3>
              <p>
                It designed to securely organize and protect ultrasound probes, ensuring easy accessibility, portability, and streamlined workflow during
                clinical or field use.
              </p>
            </article>
          </div>
        </SwiperSlide>
      </Swiper>
    </section>
    <section id="productMinifUS" class="sec-box h-screen product-mini">
      <article class="wow fadeIn">
        <h1>mini-fUS</h1>
      </article>
      <ul>
        <li>Features</li>
        <li>Gallery</li>
      </ul>
    </section>
    <section class="sec-box h-screen product-mini-fUS">
      <article class="wow fadeInUp width-middle m-auto text-center">
        <h1>Miniaturized Functional</h1>
        <h1>Ultrasound System</h1>
        <span class="width ib"
          >The mini-fUS system is a revolutionary, miniaturized, and affordable functional ultrasound (fUS) platform. It overcomes the significant cost,
          complexity, and size limitations of traditional fUS systems, making advanced neuroimaging accessible to a broader range of researchers. Despite its
          compact design, mini-fUS delivers high-fidelity brain-wide activity maps with exceptional spatiotemporal resolution and deep penetration, crucial for
          demanding neuroscience research, especially in freely moving subjects.</span
        >
      </article>
    </section>
    <section class="sec-box h-middle width m-auto flex-cc wow fadeIn">
      <h2>High-Resolution Imaging</h2>
      <span class="block ml-h">
        Achieve spatial resolution of approximately 100 µm with up to 15 mm penetration depth.<br />Frame rates up to 3.57 Hz for whole-brain mapping in freely
        moving mice.
      </span>
    </section>
    <section class="sec-box h-middle width m-auto flex-cc wow fadeIn">
      <h2>Advanced System Architecture</h2>
      <span class="block ml-h">
        A 64-channel system with 12-bit resolution, 50 MHz sampling, 2.5 ns delay precision, and high-speed data transfer (25 Gb/s). PRF up to 5 kHz with
        negligible jitter.
      </span>
    </section>
    <section class="sec-box h-screen width m-auto flex-cc wow fadeIn">
      <h2>Designed for Freely Moving Subjects</h2>
      <span class="block ml-h">
        Features a custom-designed lightweight headstage and a 64-element micro-probe, <br />enabling robust monitoring in naturalistic settings.
      </span>
    </section>
  </section>
</template>
<script>
import { Swiper, SwiperSlide } from "swiper/vue"
import { Autoplay, Pagination, Navigation } from "swiper/modules"

import imgSwiper1 from "@images/home-swiper1.png"
import imgSwiper2 from "@images/home-swiper2.png"
import imgSwiper3 from "@images/home-swiper3.png"

export default {
  name: "cmpts-product-mini",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      images: {
        imgSwiper1,
        imgSwiper2,
        imgSwiper3,
      },
      modules: [Autoplay, Pagination, Navigation],
    }
  },
}
</script>
<style lang="less" scoped>
.home-product-swiper {
  .swiper {
    z-index: 10;
    position: relative;
    width: 100%;
  }

  .swiper-slide {
    img {
      width: 100%;
    }

    & > div {
      position: relative;
    }

    article {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: @normal * 2 @normal * 3;
      background: @basicColor;

      h3 {
        margin-bottom: calc(@normal / 2);
      }

      p {
        padding-bottom: calc(@normal / 2);
      }
    }
  }

  /deep/.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 26px);
  }
}

@media (max-width: 1000px) {
  .home-product-swiper {
    padding: @normal*2 0;
    height: auto !important;
    min-height: auto !important;

    article {
      position: initial !important;
      width: auto !important;
    }

    /deep/.swiper-button-next {
      right: var(--swiper-navigation-sides-offset, 10px);
    }
  }
}
.product-mini {
  background: @borderColor url("@images/product-bg.png") center / cover no-repeat;
  article {
    padding-top: 20rem;
    text-align: center;
  }
  ul {
    display: flex;
    position: absolute;
    left: 0.8rem;
    bottom: 0.8rem;
    li {
      padding: 0.8rem 1.6rem;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 2.4rem;
    }
  }
}
.product-mini-fUS {
  article {
    padding-top: 5rem;
    span {
      margin-top: 3rem;
    }
  }
}
</style>
